<template>

    <div class="person">
        <h1>情况五：监视上述的多个数据</h1>

        <h2>姓名：{{ person.name }}</h2>

        <h2>年龄：{{ person.age }}</h2>


        <div>
            工资:{{ salary }}

        </div>


        <div>

            <button @click="changeAge">修改年龄</button>
            <button @click="changeSalary">修改薪水</button>
        </div>



    </div>


</template>

<script setup lang="ts" name='Watch1'>
import { ref, reactive, watch } from "vue";
// 数据
let person = reactive({
    name: '张三',
    age: 18
})

let salary = ref(99999)

function changeAge() {
    person.age += 1
}

function changeSalary() {
    salary.value += 1
}


//只观察某一个属性
watch([() => person.age, salary], (newValue) => {
    // let newAge = newValue[0]
    // let newsalary = newValue[1]

    //上面的两句话 可以简写成下面一句话，  数组的结构  Es6
    let [newAge, newsalary] = newValue

    console.log('-----', newAge, newsalary);
}, {
    deep: true,
    immediate: true
})

</script>






<style scoped></style>